<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>

    .layui-upload-colse {
        position: relative;
    }

    .closeUpload {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .upImg {
        width: 80px;
        height: 80px;
    }

    .formfixed {
        position: relative;
    }

    .remove {
        position: absolute;
        top: 125%;
        right: -175px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .myheader {
        height: 140px;
        background-color: #FFFFFF;
        padding: 20px 0;
        display: flex;
        align-items: center;
        margin: 0;
        flex-wrap: wrap;
    }

    .layui-tab {

        overflow: auto;
        background-color: #FFFFFF;
        margin: 10px 0 0 0;
    }

    .layui-input-block1 {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .layui-tab-title {
        height: 40px !important;
    }

    .layui-tab-content {
        height: calc(100% - 40px);
        overflow: auto;
    }

    .myremove1 {
        width: 70px;
        height: 33px;
        display: flex;
        align-items: center;
    }


    .mybutton {
        background: #fff;
        height: 150px;
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #a9b7b7;
        border: 2px solid #a9b7b7;
        margin-right: 10px;
        padding: 10px;
    }

    .mybutton:hover {
        cursor: pointer;
    }

    .layui-upload-list {
        display: flex;
        flex-wrap: wrap;
    }
</style>
<body>
<input id="inputType" th:value="${type}" style="display: none">
<input id="userId" th:value="${userId}" style="display: none">
<div class="layui-fluid mt2" style="background-color: #f0f2f5">
    <form class="layui-form" style="height: 100%;">
        <div class="layui-form-item myheader">
            <div class="layui-inline">
                <label class="layui-form-label required">课程名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入课程名称"
                           th:value="${myData?.name}"
                           th:disabled="${type=='info'}"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label required">课程价格</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="11" name="price" lay-verify="price" autocomplete="off"
                           th:value="${myData?.price}"
                           th:disabled="${type=='info'}"
                           onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                           placeholder="请输入课程价格" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">优先级</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="sort" autocomplete="off" placeholder="请输入课程优先级"
                       th:value="${myData?.sort}"
                       th:disabled="${type=='info'}"
                       onkeyup="value=value.replace(/\D/g,'')"
                       class="layui-input">
            </div>
        </div>
        </div>
        <div class="layui-tab" lay-filter="test-hash"
             th:style="${type=='info'?'height:calc(100% - 350px)':'height:calc(100% - 254px)'}">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">基础信息</li>
                <li lay-id="22">讲师信息</li>
                <li lay-id="33">课程封面</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduce" placeholder="请输入课程简介" lay-verify="introduction"
                                      th:disabled="${type=='info'}"
                                      th:text="${myData?.introduce}"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item" id="LayuiItems">
                        <!--                        循环-->
                        <div class="layui-form-item" style="display: flex;" th:each="item,voStatus:${voList}">
                            <div class="layui-inline" style="width: calc((100% - 20px) / 2);">
                                <label class="layui-form-label required">讲师姓名</label>
                                <div class="layui-input-block">
                                    <input class="form-control "
                                           th:disabled="${type=='info'}" myid="one" th:value="${item.teacherName}"
                                           type="text" placeholder="请输入讲师姓名">
                                </div>
                            </div>
                            <div class="layui-inline" style="width: calc((100% - 20px) / 2);">
                                <label class="layui-form-label required">讲师简介</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入讲师简介" lay-verify="introduction"
                                              th:disabled="${type=='info'}"
                                              th:text="${item.teacherIntroduce}"
                                              myid="two"
                                              class="layui-textarea"></textarea>
                                    <input th:value="${item?.id}" myid="three" style="display: none">
                                </div>
                            </div>
                            <button class="layui-inline layui-btn myremove1"
                                    th:style="${type!='edit'||voStatus.index==0?'visibility: hidden':''}" onclick="myRemoveLayui(this)"
                                    type="button">删除
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item" style="display: flex;  justify-content: center; align-items: center;">
                        <button type="button" class="layui-btn" onclick="addLayuiItems()">添加</button>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label required" >课程封面</label>
                        <div class="layui-upload-list" id="image">

                            <div class="layui-inline mybutton" style="padding: 0"
                                 th:each="item,imgStat:${images}"
                                 th:if="${type!='add'}">
                                <img class="upImg" th:src="${item}" style="height: 100%;width: 100%">
                                <img class="closeUpload" th:if="${type=='edit'}" th:attr="data-index=${imgStat.index}"
                                     src="/img/close.png" data-id="image">
                            </div>

                            <button lay-data="{url: '/common/sysFile/upload',id:'image',number:1}" type="button"
                                    class="layui-btn uploadSend mybutton"
                                    th:if="${type!='info'}">
                                <i class="layui-icon" style="font-size: 70px;color: #a9b7b7;">&#xe67c;</i>请上传本地图片
                            </button>
                        </div>
                        <input type="hidden" th:if="type=='add'" name="imgUrl" lay-verify="image">

                        <input type="hidden" th:if="type!='add'" th:value="${myData?.imgUrl}"
                               name="imgUrl" lay-verify="image">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required" >课程图片</label>
                        <div class="layui-upload-list" id="detailImg">

                            <div class="layui-inline mybutton" style="padding: 0"
                                 th:each="item,imgStat:${detailImg}"
                                 th:if="${type!='add'}">
                                <img class="upImg" th:src="${item}" style="height: 100%;width: 100%">
                                <img class="closeUpload" th:if="${type=='edit'}" th:attr="data-index=${imgStat.index}"
                                     src="/img/close.png" data-id="detailImg">
                            </div>

                            <button lay-data="{url: '/common/sysFile/upload',id:'detailImg',number:1}" type="button"
                                    class="layui-btn uploadSend mybutton"
                                    th:if="${type!='info'}">
                                <i class="layui-icon" style="font-size: 70px;color: #a9b7b7;">&#xe67c;</i>请上传本地图片
                            </button>
                        </div>
                        <input type="hidden" th:if="type=='add'" name="detailImg" lay-verify="image">
                        <input type="hidden" th:if="type!='add'" th:value="${myData?.detailImg}"
                               name="detailImg" lay-verify="image">
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-form-item  layui-flow-more">
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit lay-filter="submit"
                        th:text="${type=='add'?'立即提交':'确定'}">立即提交
                </button>
            </div>
        </div>

    </form>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/xmSelect.js"></script>
<script type="text/javascript" src="/js/webJs/jzweb/jazCourses/add.js"></script>
</body>
</html>